<template>
  <section>
    <!-- 卡片测试 1 -->
    <s-card :img-src="webUrl" summary="前端主流布局系统进阶与实战，轻松解决页面布局难题" />
    <br />

    <!-- 卡片测试 2 -->
    <s-card :img-src="goUrl" summary="Google资深工程师深度讲解Go语言 由浅入深掌握Go语言">
      <template #footer>
        <div class="footer">
          <div class="level">中级 · 5225人报名</div>
          <div class="price">￥399.00</div>
        </div>
      </template>
    </s-card>
    <br />

    <!-- 卡片测试 3 -->
    <s-card :img-src="javaUrl" width="370px" img-height="90px">
      <div>路线吃透面试学问，伴随身为Java工程师的你一路成长，高效充分准备面试拿offer。</div>
      <template #footer>
        <div class="footer-java">
          <div class="level">3步骤 · 3门课</div>
          <div class="level">10982收藏</div>
        </div>
      </template>
    </s-card>
  </section>
</template>

<script setup lang="ts">
import webUrl from '@/assets/imgs/web.png'
import javaUrl from '@/assets/imgs/java.png'
import goUrl from '@/assets/imgs/go.png'
</script>

<style lang="scss" scoped>
.footer {
  padding: 0 8px;
  font-size: 12px;
  text-align: left;
}

.level {
  color: #9199a1;
  margin-bottom: 8px;
}

.price {
  color: #f01414;
}

.footer-java {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 0 8px;
}
</style>
